<!--  -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="车牌号">
                <el-input v-model="formInline.cph" placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formInline.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="formInline.status" placeholder="选择审核状态" @change="changeStatusSelect">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="未审核" value="2"></el-option>
                    <el-option label="审核失败" value="3"></el-option>
                    <el-option label="证件过期" value="4"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item>
            <el-form-item label="地区">
                <el-cascader v-model="searchAddress" :props="{ checkStrictly: true }" :options="provinceAndCityData"
                    style="width: 100%;" />
            </el-form-item>

            <el-form-item label="车辆类型">
                <el-select v-model="formInline.car_type" placeholder="选择审核状态" @change="changeCarTypeSelect">
                    <el-option v-for="(item, key) in carConfig.carType" :label="item" :value="item"
                        :key="key"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="能源类型">
                <el-select v-model="formInline.enery_type" placeholder="选择审核状态" @change="changeEneryTypeSelect">
                    <el-option v-for="(item, key) in carConfig.energy" :label="item.label" :value="item.value"
                        :key="key"></el-option>
                </el-select>
            </el-form-item>
        </CustomForm>

        <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '40%' }"></CustomDescriptions>

        <el-table :data="list" style="width: 100%" height="580">
            <el-table-column prop="user_name" label="司机姓名" width="100" align="center">
            </el-table-column>
            <el-table-column prop="cph" label="车牌号" width="120" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="car_lx" label="车辆类型" align="center">
            </el-table-column>
            <el-table-column prop="car_pp" label="车辆品牌" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="ename" label="能源类型" align="center">
            </el-table-column>
            <el-table-column prop="xszdq" label="行驶证有效期" align="center">
                <template slot-scope="scope">
                    <span :style="{ color: scope.row.status == 3 ? 'red' : 'green' }">{{ scope.row.xszdq }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="shi" label="地区" align="center">
            </el-table-column>
            <el-table-column prop="kzz" label="载重量(KG)" align="center">
            </el-table-column>
            <el-table-column prop="add_time" label="添加时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="status" label="审核状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 1" style="color:green">通过</span>
                    <span v-else-if="scope.row.status == 2" style="color:red">拒绝</span>
                    <span v-else-if="scope.row.status == 3" style="color:red">过期</span>
                    <span v-else>待审核</span>
                </template>
            </el-table-column>
            <el-table-column prop="add_time" label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" v-if="[1, 2, 3].includes(scope.row.status)"
                        @click="dialogVisibleAuditing = true; getCarDetail(scope.row.id)">查看</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.status == 1"
                        @click="returnDriverHandler(scope.row.id)">退回</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.status == 0"
                        @click="dialogVisibleAuditing = true; getCarDetail(scope.row.id)">审核</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.status == 2"
                        @click="delCar(scope.row.id)">删除</el-button>
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="in-page-dropdown">
                            <el-dropdown-item>
                                <el-button size="mini" type="primary"
                                    @click="uploadCarHandler(scope.row.id)">上传车辆</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="审核车辆信息" top="5vh" :visible.sync="dialogVisibleAuditing" width="80%">
            <AuditingDialogCar v-if="dialogVisibleAuditing" :form="auditingForm" :carConfig="carConfig"
                @reject="auditingReject" @save="auditingSave">
            </AuditingDialogCar>
        </el-dialog>


        <el-dialog title="请选择拒绝原因" :visible.sync="dialogReject" width="30%">
            <el-form ref="form" :model="formReject" label-width="160px">
                <el-form-item label="主车行驶证主页">
                    <el-select v-model="formReject.idFront" placeholder="选择错误类型">
                        <el-option v-for="(item, index) in rejectReason" :label="item.label" :value="item.label"
                            :key="index + new Date()"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="主车行驶证副页">
                    <el-select v-model="formReject.idBack" placeholder="选择错误类型">
                        <el-option v-for="(item, index) in rejectReason" :label="item.label" :value="item.label"
                            :key="index + new Date()"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主车行驶证副页背面">
                    <el-select v-model="formReject.driverFront" placeholder="选择错误类型">
                        <el-option v-for="(item, index) in rejectReason" :label="item.label" :value="item.label"
                            :key="index + new Date()"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主车道路运输证">
                    <el-select v-model="formReject.driverBack" placeholder="选择错误类型">
                        <el-option v-for="(item, index) in rejectReason" :label="item.label" :value="item.label"
                            :key="index + new Date()"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂车行驶证主页">
                    <el-select v-model="formReject.driverLicense" placeholder="选择错误类型">
                        <el-option v-for="(item, index) in rejectReason" :label="item.label" :value="item.label"
                            :key="index + new Date()"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="从业资格证">
                    <el-select v-model="formReject.practice" placeholder="选择错误类型">
                        <el-option v-for="(item, index) in rejectReason" :label="item.label" :value="item.label"
                            :key="index + new Date()"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogRejectClose">取 消</el-button>
                <el-button type="primary" @click="rejectHandler">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { provinceAndCityData } from "element-china-area-data";
import { getCodeToText } from '@/utils/tool';
import { carEnergy, getCarList, returnBackCar, getCarDetail, carReview, uploadCar, deleteCar } from '@/api/carAuditing';
import AuditingDialogCar from './components/auditingDialogCar.vue'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: { AuditingDialogCar },
    data() {
        //这里存放数据
        return {
            provinceAndCityData,
            formInline: {
                name: "",
                phone: "",
                cph: "",//车牌号
                car_type: "",//车辆类型
                enery_type: "",//能源类型
                province: "",//省
                city: "",//市
                status: "0",//0全部1通过2未审核3拒绝审核4证件过期
                time: "",
            },

            list: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            pickerDateArr: "",
            searchAddress: "",
            carConfig: {//车辆配置信息
                carType: {},//车型
                color: {},// 颜色
                energy: {}//能源类型
            },
            descriptionsData: [
                {
                    label: "总共认证数",
                    count: 0,
                    unit: "(人)"
                },
                {
                    label: "当日认证车辆数",
                    count: 0,
                    unit: "(辆)"
                },
            ],
            dialogVisibleAuditing: false,//审核dialog
            auditingForm: {//审核框的数据
                xszz: "",
                xszf: "",
                xszff: "",
                ysjyxkz: "",
                guaimg: "",
                energy: "",
            },
            dialogReject: false,
            rejectId: {},
            formReject: {
                idFront: "",
                idBack: "",
                driverFront: "",
                driverBack: "",
                driverLicense: "",
                practice: "",
            },
            rejectReason: [
                {
                    label: '照片不清晰',
                }, {
                    label: '照片未漏出四个边,不完整',
                }, {
                    label: '证件不是同一辆车',
                }, {
                    label: '照片反光,不能正常使用',
                }, {
                    label: '证件未按名称要求上传',
                }, {
                    label: '道路运输证需要上传车牌页',
                }, {
                    label: '行驶证证件过期',
                }],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        searchAddress: {
            handler(newV, oldV) {
                let length = newV.length;
                if (newV && length > 0) {
                    let res = getCodeToText(newV);
                    if (length == 1) {
                        this.formInline.province = res[0];
                    } else if (length == 2) {
                        this.formInline.province = res[0];
                        if (res[0].includes('市')) {
                            this.formInline.city = res[0];
                        } else {
                            this.formInline.city = res[1];
                        }
                    }
                }
            }
        }
    },
    //方法集合
    methods: {
        async getCarDetail(id) {
            let res = await getCarDetail({ id });
            if (res.code == 200) {
                this.auditingForm = res.res;
            }
        },
        async getCarList() {
            // console.log(this.formInline);
            let res = await getCarList({
                ...this.formInline,
                page: this.currentPage,
                pageSize: this.pageSize,
            });
            if (res.code == 200) {
                this.list = res.data.list;
                this.total = res.data.total;
                this.descriptionsData[0].count = res.data.total;
                this.descriptionsData[1].count = res.data.now;
            }
        },
        async carEnergy() {
            let res = await carEnergy();
            if (res.code == 200) {
                let energy = [];
                Object.entries(res.data.energy).forEach(([key, value]) => {
                    energy.push({
                        label: value,
                        value: key
                    })
                });
                this.carConfig = {
                    carType: res.data.carType,
                    color: res.data.color,
                    energy
                };
            }
        },
        async auditingSave(data) {//审核通过回调
            let { id, car_jh, cph, IssuingOrganizations, RegisterDate, IssueDate, car_lx, car_pp, syr, syxz, kzz, is_zhu, address, color, energy, dlys_num, jiaoyunguan, zi, xszdq, status, user_id } = data;
            let res = await carReview({
                status,
                "type": "2",
                id,
                user_id,
                car_jh,
                cph,
                IssuingOrganizations,
                RegisterDate,
                IssueDate,
                car_lx,
                car_pp,
                syr,
                syxz,
                kzz,
                is_zhu,
                address,
                color,
                energy,
                dlys_num,
                jiaoyunguan,
                zi,
                xszdq,
            });
            if (res.code == 200) {
                console.log(res);
                this.$message.success(res.msg);
                this.dialogVisibleAuditing = false;
                this.currentPage = 1;
                this.getCarList();
            }
        },
        auditingReject(obj) {
            this.dialogReject = true;
            this.rejectId = obj;
        },
        async rejectHandler() {//审核不通过回调
            if (!Object.values(this.formReject).some((item) => {
                return item.length
            })) {
                this.$message.error('请至少选择一项原因');
                return;
            }
            let res = await carReview({
                ...this.rejectId,
                ...this.formReject
            })
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.dialogReject = false;
                this.dialogVisibleAuditing = false;
                this.resetTable();
                this.getDriverList();
            } else {
                this.$message.error(res.msg);
            }
        },
        dialogRejectClose() {
            this.dialogReject = false;
            this.formReject = {
                idFront: "",
                idBack: "",
                driverFront: "",
                driverBack: "",
                driverLicense: "",
                practice: "",
            };
        },
        onSubmit() {
            this.getCarList();
        },
        resetTable() {
            this.formInline = {
                name: "",
                phone: "",
                cph: "",//车牌号
                car_type: "",//车辆类型能源类型
                enery_type: "",//能源类型
                province: "",//省
                city: "",//市
                status: "0",//0全部1通过2未审核3拒绝审核4证件过期
                time: "",
            };
            this.searchAddress = [];
            this.pickerDateArr = null;
            this.currentPage = 1;
            this.pageSize = 10;
            this.getCarList();
        },
        changeStatusSelect(status) {//状态选择 0全部1通过2未审核3拒绝审核4证件过期
            this.currentPage = 1;
            this.getCarList();
        },
        changeCarTypeSelect(car_type) {
            this.currentPage = 1;
            this.getCarList();
        },
        changeEneryTypeSelect(enery_type) {
            this.currentPage = 1;
            this.getCarList();
        },
        changeDatePicker(data) {//日期选择器
            console.log(data);
            if (data) {
                this.formInline.time = data.join(' - ');
            } else {
                this.formInline.time = "";
            }
        },
        returnDriverHandler(id) {
            this.$confirm('确实要退回重新审核该车辆吗？（退回后需要重新审核！）?', '提示', {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                let res = await returnBackCar({
                    id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getCarList();
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {

            })
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.currentPage = 1;
            this.getCarList();
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.getCarList();
        },
        async uploadCarHandler(id) {
            this.$confirm('确实要上传该车辆吗？?', '提示', {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                let res = await uploadCar({
                    id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getCarList();
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {

            })
        },
        async delCar(id) {
            this.$confirm('确实要删除该车辆吗？?', '提示', {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                let res = await deleteCar({
                    id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getCarList();
                } else {
                    this.$message.error(res.msg);
                }
            }).catch(() => {

            })
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        if (this.$route.query) {
            if (this.$route.query.status) {
                this.formInline.status = this.$route.query.status;
            }
        }
        this.carEnergy();
        this.getCarList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-pagination {
    margin-top: 20px;
}
</style>